﻿<template>
  <div>
    <!-- 表格 -->
    <template v-if = "element && element.key && element.type == 'table'">
      <div class = 'page_tableContent dynamic_single ' style = 'margin-bottom:20px;' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <el-table :data = 'element.tableData' :style = "{width: element.options.width}" :stripe = 'element.options.stripe' :border = 'element.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns' :key = 'tableIndex' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- 树形表格 -->
    <template v-else-if = "element && element.key && element.type == 'table_expand'">
      <div class = 'page_tableContent dynamic_single '
      style = 'margin-bottom:20px;' :class = "{active: selectWidget.key == element.key}"
      @click.stop = "handleSelectWidget(index)">
        <el-table :data = 'element.tableData' :style = "{width: element.options.width}" :stripe = 'element.options.stripe' :border = 'element.options.border'>
          <el-table-column type = "expand" v-if = '!element.sub_options.options.isHidden'>
            <template slot-scope = "subTable">
              <div class = 'page_tableContent' style = "padding:10px; min-height:0px">
                <el-table :data = 'subTable.row.subTableData' style = 'width:100%'
                :stripe = 'element.sub_options.options.stripe' :border = 'element.sub_options.options.border'>
                  <el-table-column align = 'center' v-for = '(sitem, sindex) in element.sub_options.tableColumn' :key = 'sindex'
                  :label = 'sitem.text' show-overflow-tooltip>
                    <template slot-scope = 'scope'>
                      <span>{{scope.row[sitem.indexName]}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class = 'page_bottomContent' v-if = 'element.sub_options.options.showPageInfo'>
                <div class = 'page_paginationContent'>
                  <el-pagination background :current-page = "1" :page-size = '10' :pager-count = "5"
                  :page-sizes = "[10, 25, 50, 100, 500]" layout = "total, sizes, prev, pager, next" :total = '0'></el-pagination>
                </div>
            </div>
            </template>
          </el-table-column>
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns' :key = 'tableIndex' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- 页码 -->
    <template v-else-if = "element && element.key && element.type == 'pagination'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <el-pagination background
        :current-page.sync = "element.options.currentPage"
        :page-size = 'element.options.pageSize'
        :pager-count = "5"
        :page-sizes = "[10, 25, 50, 100]"
        layout = "total, sizes, prev, pager, next"
        :total = 'element.options.totalLength'>
        </el-pagination>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- 按钮 -->
    <template v-else-if = "element && element.key && element.type == 'button'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <div :style = "{'text-align': Object.keys(element.options).indexOf('textAlign') !== -1 ? element.options.textAlign : 'left'}">
          <el-button :type = "element.options.type" :disabled = "element.options.disabled">{{element.name}}</el-button>
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title="删除" @click.stop = "handleWidgetDelete(index)" v-if="selectWidget.key == element.key" type="danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- echarts图标 -->
    <template v-else-if = "element && element.key && element.type == 'echarts'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <div>
          <img v-if = "element.options.optionType === 'line'" style = 'max-width: 100%' src = 'static/style/common/images/line.png' alt = "">
          <img v-if = "element.options.optionType === 'pie'" style = 'max-width: 100%' src = 'static/style/common/images/pie.png' alt = "">
          <img v-if = "element.options.optionType === 'bar'" style = 'max-width: 100%' src = 'static/style/common/images/bar.png' alt = "">
          <img v-if = "element.options.optionType === 'map'" style = 'max-width: 100%' src = 'static/style/common/images/map.png' alt = "">
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title="删除" @click.stop = "handleWidgetDelete(index)" v-if="selectWidget.key == element.key" type="danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- 其它表单组件时 -->
    <el-form-item class = "dynamic_single" v-else
    :class = "{active: selectWidget.key == element.key, 'dynamic_singleRequired': element.options.required, form_noLeftMargin: !element.options.showLabel}"
    :label = "!element.options.showLabel ? '' : element.name"
    @click.native.stop = "handleSelectWidget(index)">
      <!-- 单行文本输入框/手机号输入框/固定号码输入框/身份证号码输入框/邮箱输入框/邮政编码/IPv4Input/IPv6Input/MACInput -->
      <template
      v-if = "element.type == 'EmailInput' || element.type == 'Input' || element.type == 'MobileInput' || element.type == 'TelInput' || element.type == 'IDInput' || element.type == 'PostCodeInput' || element.type == 'IPv4Input' || element.type == 'IPv6Input' || element.type == 'MACInput'">
        <el-input v-model = "element.options.defaultValue" :style = "{width: element.options.width}" :placeholder = "element.options.placeholder"
        :clearable = "element.options.clearable" :disabled = "element.options.disabled"
        :maxlength = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? element.options.maxLength : Infinity"
        :show-word-limit = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? true : false">
          <el-button slot="append"
            v-if = "Object.keys(element.options).indexOf('linkageOption') !== -1 && element.options.linkageOption.isLinkage && element.options.linkageOption.linkageType === 'eventRender'">
            <i class= 'iconfont icon-zidingyi'></i>
          </el-button>
        </el-input>
      </template>
      <!-- 只读文本输入框 -->
      <template v-if = "element.type == 'ReadonlyInput'">
        <el-input :style = "{width: element.options.width}" disabled ></el-input>
      </template>
      <!-- 多行文本 -->
      <template v-if = "element.type == 'TextArea'">
        <el-input type = "textarea" v-model = "element.options.defaultValue"
        :style = "{width: element.options.width}"
        :disabled = "element.options.disabled"
        :placeholder = "element.options.placeholder"
        :clearable = "element.options.clearable"
        :maxlength = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? element.options.maxLength : Infinity"
        :show-word-limit = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? true : false"
        ></el-input>
      </template>
      <!-- 下拉框单选 -->
      <template v-if = "element.type == 'Select'">
        <el-select
        v-model = "element.options.defaultValue"
        :disabled = "element.options.disabled"
        :clearable = "element.options.clearable"
        :placeholder = "element.options.placeholder"
        :filterable = "element.options.filterable"
        :style = "{width: element.options.width}">
          <el-option v-for = "item in element.options.remoteOptions" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
        </el-select>
      </template>
      <!-- 主从表级联单选框 -->
      <template v-if = "element.type == 'CascadeSelectMS' || element.type == 'Multi_CascadeSelectMS' || element.type == 'CascadeSelectTree' || element.type == 'Multi_CascadeSelectTree'">
        <el-cascader :options = '[]' filterable clearable></el-cascader>
      </template>
      <!-- 单选按钮 -->
      <template v-if = "element.type == 'RadioButton'">
        <el-radio-group v-model = "element.options.defaultValue"
        :disabled = "element.options.disabled" size = "medium">
          <template v-if = 'element.options.isRadioButton'>
            <el-radio-button v-for = "item in element.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-radio-button>
          </template>
          <template v-else>
            <el-radio v-for = "item in element.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-radio>
          </template>
        </el-radio-group>
      </template>
      <!-- 多选按钮 -->
      <template v-if = "element.type == 'CheckBox'">
        <el-checkbox-group v-model = "element.options.defaultValue"
        :disabled = "element.options.disabled" size = "medium">
          <template v-if = 'element.options.isCheckBoxButton'>
            <el-checkbox-button v-for = "item in element.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-checkbox-button>
          </template>
          <template v-else>
            <el-checkbox v-for = "item in element.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-checkbox>
          </template>
        </el-checkbox-group>
      </template>
      <!-- 下拉框多选 -->
      <template v-if = "element.type == 'MultiSelect'">
        <el-select
        v-model = "element.options.defaultValue"
        :disabled = "element.options.disabled"
        multiple collapse-tags
        :clearable = "element.options.clearable"
        :placeholder = "element.options.placeholder"
        :filterable = "element.options.filterable"
        :style = "{width: element.options.width}">
          <el-option v-for = "item in element.options.remoteOptions" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
        </el-select>
      </template>
      <!-- 整数输入框 -->
      <template v-if = "element.type == 'IntInput'">
        <el-input-number
          v-model = "element.options.defaultValue"
          :disabled = "element.options.disabled" :class = "element.options.controlsShow ? '' : 'inputNumber_noControls'"
          :min = "element.options.min === null ? -Infinity : element.options.min" :max = "element.options.max === null ? Infinity : element.options.max" :precision = '0'
          :controls-position = "element.options.controlsPosition" :controls = 'element.options.controlsShow'
          :style = "{width: element.options.width}"
        ></el-input-number>
      </template>
      <!-- 小数输入框/货币输入框 -->
      <template v-if = "element.type == 'DecimalInput' || element.type == 'Money'">
        <el-input-number
          v-model = "element.options.defaultValue"
          :disabled = "element.options.disabled" :class = "element.options.controlsShow ? '' : 'inputNumber_noControls'"
          :min = "element.options.min === null ? -Infinity : element.options.min" :max = "element.options.max === null ? Infinity : element.options.max" :precision = "element.options.precision"
          :controls-position = "element.options.controlsPosition" :controls = 'element.options.controlsShow'
          :style = "{width: element.options.width}"
        ></el-input-number>
      </template>
      <!-- 日历--时间日期格式 -->
      <template v-if = "element.type == 'Calendar'">
        <el-date-picker type = "datetime"
        v-model = "element.options.defaultValue"
        :placeholder = "element.options.placeholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        :value-format = 'element.options.format' :format = 'element.options.format'
        :style = "{width: element.options.width}"
        ></el-date-picker>
      </template>
      <!-- 日历--年 -->
      <template v-if = "element.type == 'CalendarYear'">
        <el-date-picker type = "year"
        v-model = "element.options.defaultValue"
        :placeholder = "element.options.placeholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        :value-format = 'element.options.format' :format = 'element.options.format'
        :style = "{width: element.options.width}"
        ></el-date-picker>
      </template>
      <!-- 日历--年月 -->
      <template v-if = "element.type == 'CalendarYearMonth'">
        <el-date-picker type = "month"
        v-model = "element.options.defaultValue"
        :placeholder = "element.options.placeholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        :value-format = 'element.options.format' :format = 'element.options.format'
        :style = "{width: element.options.width}"
        ></el-date-picker>
      </template>
      <!-- 日历--日期选择器 -->
      <template v-if = "element.type == 'CalendarDate'">
        <el-date-picker type = "date"
        v-model = "element.options.defaultValue"
        :placeholder = "element.options.placeholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        value-format = 'yyyy-MM-dd' :format = 'element.options.format'
        :style = "{width: element.options.width}"
        ></el-date-picker>
      </template>
      <!-- 日历--时间格式 -->
      <template v-if = "element.type == 'CalendarTime'">
        <el-time-picker
        v-model = "element.options.defaultValue"
        :placeholder = "element.options.placeholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        value-format = 'HH:mm:ss' :format = 'element.options.format'
        :style = "{width: element.options.width}"
        ></el-time-picker>
      </template>
      <!-- 开关 -->
      <template v-if = "element.type == 'Switch'">
        <el-switch v-model = "element.options.defaultValue" :disabled = "element.options.disabled"></el-switch>
      </template>
      <!-- slider -->
      <template v-if = "element.type == 'SlideInput'">
        <el-slider v-model = "element.options.defaultValue" :disabled = "element.options.disabled"
        :min = 'element.options.min' :max = 'element.options.max'></el-slider>
      </template>
      <!-- rate -->
      <template v-if = "element.type == 'StarRate'">
        <el-rate v-model = "element.options.defaultValue"  :disabled = "element.options.disabled"
        :show-text = "element.options.showText" :allow-half = "element.options.allowHalf"
        :show-score = "element.options.showScore"
        :texts = "element.options.texts"
        :void-icon-class = "element.options.voidIcon"
        :icon-classes = "element.options.iconClasses"></el-rate>
      </template>
      <!-- 单个文件/多个文件 -->
      <template v-if = "element.type == 'File' || element.type == 'Files' || element.type == 'Video'">
        <el-upload action ='#' disabled drag>
          <i class = "el-icon-upload"></i>
          <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </template>
      <!-- 单个图片/多个图片 -->
      <template v-if = "element.type == 'Picture' || element.type == 'Pictures'">
        <el-upload action ='#' disabled list-type = "picture-card">
          <i class = "el-icon-plus"></i>
        </el-upload>
      </template>
      <!-- 富文本输入框/地图经纬度/图片位置拾取 -->
      <template v-if = "element.type == 'Pop' || element.type == 'MultiPop' || element.type == 'JSONEditor' || element.type == 'MD' || element.type == 'RichText' || element.type == 'GIS_Draw_Line' || element.type == 'MapXY' || element.type == 'PicXY'">
        <el-input v-model = "element.options.defaultValue" placeholder = '点击输入内容'
        :disabled = 'element.options.disabled'></el-input>
      </template>
      <!-- 可编辑的表格 -->
      <template v-if = "element.type == 'editableTable'">
        <div class="addColumn" v-if = "!element.options.disabled">
          <p><i class="iconfont icon-add"></i>添加数据</p>
        </div>
        <el-table :data = 'element.tableData' :style = "{width: element.options.width}" :stripe = 'element.options.stripe' :border = 'element.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem, tableItemIndex) in getTableColumns' :key = 'tableItemIndex' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column align='center' v-if = "!element.options.disabled" label = '操作'>
            <template slot-scope = 'scope'>
              <el-button type = 'text'>
                <span><i class = 'iconfont icon-shanchu'></i>删除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class = 'dynamic_singleBtns'>
        <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
          <i class="iconfont icon-shanchu"></i>
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: ['element', 'select', 'index', 'data'],
  data () {
    return {
      selectWidget: this.select
    }
  },
  computed: {
    getTableColumns: function () {
      let currentTableColumns = []
      if ((this.element.type === 'table' || this.element.type === 'table_expand') && this.element.tableColumn.length) {
        this.element.tableColumn.forEach(item => {
          if (item.isShow) {
            this.$set(currentTableColumns, currentTableColumns.length, item)
          }
        })
      } else if (this.element.type === 'editableTable' && this.element.tableColumns.length) {
        this.element.tableColumns.forEach(item => {
          if (item.isShow) {
            this.$set(currentTableColumns, currentTableColumns.length, item)
          }
        })
      }
      if (currentTableColumns.length) {
        return currentTableColumns.sort(this.orderByObjAttr('sortNum'))
      } else {
        return []
      }
    }
  },
  methods: {
    // 选中某个元素时
    handleSelectWidget (index) {
      this.selectWidget = this.data.list[index]
    },
    // 删除某个元素时
    handleWidgetDelete (index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {}
        } else {
          this.selectWidget = this.data.list[index - 1]
        }
      } else {
        this.selectWidget = this.data.list[index + 1]
      }
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    // 对象数组排序
    orderByObjAttr (key) {
      return function (val1, val2) {
        return val1[key] - val2[key]
      }
    }
  },
  watch: {
    select (val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>
